<template>
  <uni-popup ref="spec" type="bottom" :maskClick="true" class="popup">
    <view class="wrap" @tap.stop.prevent @touchmove.stop.prevent>
      <view class="flex justify-between">
        <view class="margin-right">
          <image class="block-150 radius bg-gray" mode="aspectFill" :src="thumb" @click="preview(thumb)"></image>
        </view>
        <view class="flex-sub flex flex-direction justify-end">
          <view class="text-theme text-bold">
            <text class="text-price">{{ price }}</text>
          </view>
          <view class="text-sm text-999 margin-top-xs">{{ $t('库存') }} {{ stock }}</view>
          <view style="height: 80rpx" class="text-df text-666 margin-top-xs text-cut-2">
            <text v-if="skuName">{{ $t('已选择') }}: {{ skuName }}</text>
          </view>
        </view>
        <view class="close-box">
          <text class="cuIcon-close" @tap="close"></text>
        </view>
      </view>
      <scroll-view class="speclist-max-height" scroll-y="true" @touchmove.stop>
        <view class="margin-top" v-if="speclist.length > 0">
          <block v-for="(item, index) in speclist" :key="index">
            <view>
              <view class="text-sm text-333 text-bold padding-bottom-sm">{{ item.propName }}</view>
              <view class="item">
                <template v-for="(item2, index2) in item.itemVos">
                  <template>
                    <view :key="index2" class="item-tag" :class="{ active: selectSkuId[index] == item2.id }"
                      @tap="selectSpec(index, item2)">
                      {{ item2.propItemName }}
                    </view>
                  </template>
                  <!-- <template>
                    <view :key="index2" class="item-tag disable">
                      {{ item2.propItemName }}
                    </view>
                  </template> -->
                </template>
              </view>
            </view>
          </block>
        </view>
      </scroll-view>
      <scroll-view class="speclist-max-height" scroll-y="true" @touchmove.stop v-if="typeTypes==2">
        <view class="margin-top">
          <view>
            <view class="text-sm text-333 text-bold padding-bottom-sm">租赁</view>
            <view class="item">
              <template v-for="(item3, index3) in leaseItemVos">
                <template>
                  <view :key="index3" class="item-tag" :class="{ active:  leaseId == item3.id }"
                    @tap="selectMoth(index3, item3)">
                    {{item3.propItemName}}
                  </view>
                </template>
                <!-- <template>
                    <view :key="index2" class="item-tag disable">
                      {{ item2.propItemName }}
                    </view>
                  </template> -->
              </template>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="margin-top">
        <view class="flex justify-between align-center padding-tb-sm">
          <view class="text-333 text-sm text-bold">{{ $t('数量') }}</view>
          <uni-number-box v-if="Number(limit)" :value="number" :min="1" :max="Number(limit)" @change="setnumber"
            :step="1"></uni-number-box>
          <uni-number-box v-else :value="number" :min="1" :max="Number(stock)" @change="setnumber"
            :step="1"></uni-number-box>
        </view>
        <view class="text-right text-theme text-sm" v-if="Number(limit) > 0">{{ $t('此商品限购') }}{{ limit }}{{ $t('件') }}
        </view>
      </view>
      <view class="margin-top flex round overHidden" v-if="typeTypes==1">
        <view class="flex-sub btn color1" @tap.stop="handleSubmit('addCart')">
          {{ $t('加入购物车') }}
        </view>
        <view class="flex-sub btn color2" @tap.stop="handleSubmit('buyNow')">
          {{ $t('立即抢购') }}
        </view>
      </view>
      <view class="margin-top flex round overHidden" v-if="typeTypes==2">
        <view class="flex-sub btn color1" @tap.stop="handleSubmit('addCart')">
          {{ $t('加入购物车') }}
        </view>
        <view class="flex-sub btn color2" @tap.stop="handleSubmit('buyNow')">
          租赁
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
  export default {
    name: 'benben-specs-popup',
    props: {
      priceName: {
        //商品价格字段
        type: [String, Number],
        default: 'shop_price',
      },
      // spu规格列表
      speclist: {
        type: Array,
        default: () => [],
      },
      // sku列表
      skulist: {
        type: [Array, Object],
        default: () => [],
      },
      // 租赁时长
      leaseItemVos: {
        type: [Array, Object],
        default: () => [],
      },
      limit: {
        type: [String, Number],
        default: 0,
      },
      //选中的规格
      skuId: {
        type: [String, Number],
        default: 0,
      },
      //选中的月份
      leaseId: {
        type: [String, Number],
        default: 0,
      },
      skuName: {
        type: [String, Number],
        default: 0,
      },
      price: {
        type: [String, Number],
        default: 0,
      },
      marketPrice: {
        type: [String, Number],
        default: 0,
      },

      memberPrice: {
        type: [String, Number],
        default: 0,
      },
      stock: {
        type: [String, Number],
        default: 0,
      },
      number: {
        type: [String, Number],
        default: 1,
      },
      thumb: {
        type: [String],
        default: '',
      },
      activeSkuTag: {
        type: [String],
        default: '',
      },
      skuTag: {
        type: [String],
        default: '',
      },
      typeTypes: {
        type: [String],
        default: '',
      }
    },
    data() {
      return {
        selectSkuId: [],
        selectSkuName: [],
        type: '',
        flag: false,

      }
    },
    computed: {
      skulistArr() {
        let skulistArr = []
        if (this.skulist) {
          Object.values(this.skulist).map((item) => {
            if (item.key) {
              skulistArr.push(item.key.split('_'))
            }
          })
        }
        return skulistArr
      },
    },
    watch: {
      skulist: {
        //监听规格改变
        handler(value) {
          this.init()
        },
        deep: true,
        immediate: true,
      },
    },
    created() {
      console.log('typeTypes', this.typeTypes)
    },
    methods: {
      // 初始化
      init() {
        let skuGoods = Object.values(this.skulist).find((item) => item.compropItemIdss == this.skuId)
        console.log('skuGoods', skuGoods)
        if (skuGoods) {
          this.selectSkuId = skuGoods.compropItemIdss.split(',')
        } else {
          this.selectSkuId = new Array(this.speclist.length)
        }
        console.log('skuGoods', this.selectSkuId)
        this.selectSkuId.map((item, index) => {
          if (!item) return
          let selectItem = this.speclist[index].itemVos.find((val) => val.id == item)
        })
        this.getSelectSkuName()
        this.selectGoods()
      },
      getSelectSkuName() {
        let selectSkuName = new Array(this.speclist.length)
        this.selectSkuId.map((item, i) => {
          if (!item) return
          let specitem = this.speclist[i].itemVos.find((val) => val.id == item)
          console.log('specitem', specitem)
          selectSkuName[i] = (specitem && specitem.propItemName) || ''
        })
        console.log('selectSkuName', selectSkuName)
        selectSkuName = selectSkuName.filter((item) => item)
        this.$emit('update:sku-name', selectSkuName.join(','))
        // let selectSkuName = ''
        // let selectSkuId = this.selectSkuId.filter((item) => item)
        // if (selectSkuId.length !== Object.keys(this.speclist).length) return
        // selectSkuId = selectSkuId.join(',')
        // // this.$emit('update:sku-name', selectSkuName.join(','))
        // let skuGoods = Object.values(this.skulist).find((item) => item.compropItemIdss == selectSkuId)
        // if (skuGoods) {
        //   this.$emit('update:stock', skuGoods.saleNum)
        //   this.$emit('update:number', this.number)
        //   this.$emit('update:sku-name', skuGoods.comPropItemNames)
        //   this.$emit('update:sku-id', skuGoods.id)
        // }


        return;


        // let selectSkuName = new Array(this.speclist.length)

        // this.selectSkuId.map((item, i) => {
        //   if (!item) return
        //   let specitem = this.speclist[i].itemVos.find((val) => val.compropItemIdss == item)
        //   selectSkuName[i] = (specitem && specitem.item) || ''
        // })
        // console.log('selectSkuName', selectSkuName)
        // selectSkuName = selectSkuName.filter((item) => item)

        // this.$emit('update:sku-name', selectSkuName.join(','))
      },
      // 判断是否禁用
      isDisable(index, id) {
        let isSelecArr = []
        this.selectSkuId.map((item, i) => {
          if (i !== index && item) {
            isSelecArr.push({
              index: i,
              id: item,
            })
          }
        })
        if (!isSelecArr.length) return true
        let skulistArr = this.skulistArr.filter((item) => {
          let isSelec = isSelecArr.every((selecitem) => {
            return item[selecitem.index] == selecitem.id
          })
          return isSelec && item[index] == id
        })
        return skulistArr.length
      },
      // 点击添加购物车
      handleSubmit(type) {
        let emptyIndex = this.selectSkuId.findIndex((item) => !item)
        console.log('this.speclist', this.speclist[emptyIndex])
        //判断多规格商品是否选择了规格
        if (this.selectSkuId.length && emptyIndex != -1) return this.$message.info(
          `${global.i18n.t('请选择')}${this.speclist[emptyIndex].propName}`)
        if (this.typeTypes == 2) {
          if (!this.leaseId) {
            this.$message.info('请选择租赁时长')
            return
          }
        }
        // if (this.stock <= 0) return this.$message.info(global.i18n.t('暂无库存'))

        this.$emit(type)
      },
      // 数量改变
      setnumber(e) {
        this.$emit('update:number', e)
      },
      // 选择月份
      selectMoth(index3, item3) {
        this.leaseId = item3.id
        this.$emit('update:lease-id', this.leaseId)
      },
      // 点击规格
      selectSpec(index, item) {
        // let is_upload_image = this.speclist[index].is_upload_image || '0'
        console.log('this.selectSkuId[index]', index, this.selectSkuId, item.id)
        if (this.selectSkuId[index] == item.id) {
          this.$set(this.selectSkuId, index, '')
        } else {
          this.$set(this.selectSkuId, index, item.id)
        }
        // if (is_upload_image == '1') {
        //   this.$emit('update:thumb', item.thumb)
        // }
        this.getSelectSkuName()
        this.selectGoods()
      },
      // 获取选中商品的信息
      selectGoods() {
        let selectSkuId = this.selectSkuId.filter((item) => item)

        if (selectSkuId.length !== Object.keys(this.speclist).length) return
        selectSkuId = selectSkuId.join(',')
        console.log('selectSkuId', selectSkuId)

        let skuGoods = Object.values(this.skulist).find((item) => item.compropItemIdss == selectSkuId)

        if (skuGoods) {
          this.stock = skuGoods.inventNum
          // this.$emit('update:market-price', skuGoods.market_price)
          // this.$emit('update:member-price', skuGoods.member_price)
          // this.$emit('update:price', skuGoods[this.priceName])
          console.log('skuGoods', skuGoods)
          this.$emit('update:stock', skuGoods.inventNum)
          this.$emit('update:number', this.number)
          // if (skuGoods.hasOwnProperty('limit') && skuGoods.limit) {
          //   this.$emit('update:limit', skuGoods.limit)
          //   if (+skuGoods.limit < !+this.number) {
          //     this.$emit('update:number', skuGoods.limit)
          //   }
          // }
          // if (+skuGoods.sortNum < +this.number) {
          //   this.$emit('update:number', skuGoods.sortNum)
          // }
          // if (+skuGoods.sortNum < +this.number) {
          //   this.$emit('update:number', skuGoods.sortNum)
          // }
          // if (+skuGoods.sortNum && !+this.number) {
          //   this.$emit('update:number', 1)
          // }
          console.log('skuGoods', skuGoods)
          this.$emit('update:sku-id', skuGoods.id)
          // if (skuGoods.thumb) {
          //   this.$emit('update:thumb', skuGoods.thumb)
          // }
        }
      },
      // 打开弹窗
      open(type) {
        this.type = type || 'all'
        this.init()
        this.$refs.spec.open()
      },
      // 关闭弹窗
      close() {
        this.$refs.spec.close()
      },
      // 规格预览图片
      preview(urls) {
        uni.previewImage({
          current: urls,
          urls: [urls],
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .wrap {
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .close-box {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999999;
      font-size: 28rpx;
      font-weight: bold;
    }

    .item {
      display: flex;
      flex-wrap: wrap;

      .item-tag {
        display: inline-block;
        font-size: 24rpx;
        color: var(--sku-tag-color);
        background: var(--sku-tag-bg);
        padding: 12rpx 24rpx;
        border-radius: 100rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        border: 1px solid var(--sku-tag-bg);
      }

      .item-tag.active {
        background-color: var(--active-sku-tag-bg);
        color: var(--active-sku-tag-color);
        border-color: var(--active-sku-tag-color);
      }

      .item-tag.disable {
        color: #cccccc !important;
      }
    }

    .btn {
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #ffffff;
    }
  }

  .block-150 {
    width: 150rpx;
    height: 150rpx;
    min-width: 150rpx;
    min-height: 150rpx;
  }

  .color1 {
    background: #0A2A48;
  }

  .color2 {
    background: #327FFB;
  }

  .color3 {
    background: var(--confirm-btn-bg);
  }

  .overHidden {
    overflow: hidden;
  }

  .popup /deep/.uni-popup__wrapper-box {
    max-height: 100% !important;
  }

  .speclist-max-height {
    // #ifndef MP-WEIXIN
    max-height: 800rpx;
    // #endif
    // #ifdef MP-WEIXIN
    max-height: 650rpx;
    // #endif
  }
</style>
